/**
 * @descrition 分页
 */
import React, { useState, useEffect } from 'react';
import { Pagination } from 'antd';

function AbPagination({ paginationBase }) {
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 100,
    showTotal: (total) => `共 ${total} 条`,
    itemRender: (_, type, originalElement) => {
      if (type === 'prev') {
        return <a>{paginationBase.prev}</a>;
      }
      if (type === 'next') {
        return <a>{paginationBase.next}</a>;
      }
      return originalElement;
    },
    hideOnSinglePage: paginationBase.hideOnSinglePage,
    showSizeChanger: paginationBase.showSizeChanger,
  })

  /**
   * @description 4.分页有变化时
   * @param {*} current 
   * @param {*} pageSize 
   */
  const handlePagination = (current, pageSize) => {

    setPagination({
      ...pagination,
      current,
      pageSize
    })
  };

  useEffect(() => {
    setPagination(pre => {
      return {
        ...pre,
        itemRender: (_, type, originalElement) => {
          if (type === 'prev') {
            return <a>{paginationBase.prev}</a>;
          }
          if (type === 'next') {
            return <a>{paginationBase.next}</a>;
          }
          return originalElement;
        },
        hideOnSinglePage: paginationBase.hideOnSinglePage,
        showSizeChanger: paginationBase.showSizeChanger,
      }
    })
  }, [paginationBase])

  return (
    <div className='ab-pagination-wrapper'>
      <Pagination
        {...pagination}
        onChange={handlePagination}
        rootClassName="ab-pagination"
      />
    </div>

  )
}

export default React.memo(AbPagination) 